<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <!--v-for用来遍历
        用法：v-for="value key index in 数组名"
        例如：<span>{{key}} {{value}} {{index}}</span>
        ps:在使用v-for的时候，最好在中间绑定一个key，这是vue官方建议的，因为绑定一个唯一的key，vue内部更容易识别，不绑定也行
    -->
    <!--v-bind的简化写法   ： -->

    <h1 v-for="value,index in arrey" :key="value.id">[{{index}} {{value}}]</h1>

    <!--遍历数组中的json对象-->
    <h1 v-for="value,index in user">[{{value.id}}---{{value.age}}----{{value.name}}]</h1>

    <table border="1" width="100%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>

        <tr v-for="value,index in user">
            <td>{{value.id}}</td>
            <td>{{value.name}}</td>
            <td>{{value.age}}</td>
        </tr>

    </table>
</div>
</body>
</html>

<script src="resource/vue.js"></script>

<script>


    new Vue({
        el:app,
        data: {
            arrey:[2,5,6,7,8,9],
            user:[
                {id:4,name:"xiaohei",age:18},
                {id:5,name:"xiaoxiao",age:19},
                {id:6,name:"xiaoma",age:12},
            ]
        },
        methods:{

        },
    });





</script>